<!doctype html>
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>loadmore测试2---使用滚动的方法加载更多</title>
	<link rel="stylesheet" href="css/weui.css">
    
</head>
<body>
<div class="content">
    <div class="weui_panel weui_panel_access">
        <div class="weui_panel_hd">文章列表</div>
        <div class="weui_panel_bd js-blog-list">
           
        </div>
    </div>
	
</div>
<script src="js/zepto.min.js"></script>
<script>
$(function(){

	/*初始化*/
	var counter = 0; /*计数器*/
	var pageStart = 0; /*offset*/
	var pageSize = 7; /*size*/
	var isEnd = false;/*结束标志*/
	var isAjax = false;/*防止滚动过快，服务端没来得及响应造成多次请求*/
	
	/*首次加载*/
	getData(pageStart, pageSize);
	
	/*监听加载更多*/	
	$(window).scroll(function(){
		console.log(isEnd, isAjax);
		
		/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
		if(isEnd == true || isAjax == true){
			return;
		}

		// 当滚动到最底部以上100像素时， 加载新内容
		if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
			counter ++;
			pageStart = counter * pageSize;
			
			getData(pageStart, pageSize);
		}
	});
    
	
	function getData(offset,size){
	
		isAjax = true;

		$.ajax({
			type: 'GET',
			url: 'json/blog.json'+ '?' + offset + '/' + size, //这里offset,size无作用，仅方便调试
			dataType: 'json',
			success: function(reponse){

				isAjax = false;
				
				var data = reponse.list;
				var sum = reponse.list.length;

				var result = '';
				
				/************业务逻辑块：实现拼接html内容并append到页面*****************/
				
				//console.log(offset , size, sum);
				
				/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
				* 例如分页数是5，只剩2条，则只取2条
				*
				* 实际MySQL查询时不写这个不会有问题
				*/
				if(sum - offset < size ){
					size = sum - offset;
				}
				
				/*使用for循环模拟SQL里的limit(offset,size)*/
				for(var i=offset; i< (offset+size); i++){
					result +='<div class="weui_media_box weui_media_text">'+
							'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
							'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
						'</div>';
				}

				$('.js-blog-list').append(result);
				
				/*******************************************/
	
				if ( (offset + size) >= sum){
					isEnd = true;
					//提示没有了
				}
			},
			error: function(xhr, type){
				alert('Ajax error!');
			}
		});
	}
});
</script>
<script src="js/tj.js"></script>
</body>
</html>